{% extends "./layout/layout.html" %} {% block content %}
<div class="container">

  <form>
    <p>基本信息</p>
    <div class="form-group">
      <label for="exampleInputEmail1">昵称</label>
      <input type="text" class="form-control" id="input-nick" placeholder="请输入昵称" value="{{userInfo.nickName}}">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">城市</label>
      <input type="text" class="form-control" id="input-city" placeholder="请输入城市" value="{{userInfo.city}}">
    </div>
    <div>
      <label for="exampleInputPassword1">头像</label>
      <img src="{{userInfo.avatar}}" alt="" id="img-picture" style="width: 100px;height: 100px;">
      <br>
      <input type="file" class="from-control-file">
      <button type="button" class="btn btn-primary">保存</button>
    </div>
    <p>修改密码</p>
    <div class="from-group">
      <label for="">当前密码</label>
      <input type="password" class="form-control" id="input-old-password" placeholder="请输入当前密码">
    </div>
    <div class="from-group">
      <label for="">新密码</label>
      <input type="password" class="form-control" id="input-new-password" placeholder="请输入新密码">
    </div>
    <div class="from-group">
      <label for="">确认密码</label>
      <input type="password" class="form-control" id="input-new-password-repeat" placeholder="请确认密码">
    </div>
    <button type="submit" class="btn btn-primary" id="submit">提交</button>
    <hr>
    <button type="submit" class="btn btn-primary" id="btn-logout">退出登录</button>
  </form>
</div>
{% endblock %} {% block js %}
<script>
  // 图片上传
  $(".from-control-file").change(function () {
    // const formData = new FormData();  // 新建表单对象
    const data = $(this)[0].files[0]; // 获取图片信息
    // formData.append("file", data);    // 将图片信息添加到表单对象中
    // ajax上传formData
    ajax.upload("/api/uploadImg", data, function (err, data) {
      if (err) {
        alert(err)
        return;
      }
      // 将头像地址变更 res.data.url
      $("#img-picture").attr("src", data.url);
    })
    // $.ajax({
    //   type: "post",
    //   url: "/api/uploadImg",
    //   data: formData, // {key="value"} 或者 key=value&key2=value2
    //   contentType: false, // 发送信息至服务器时内容编码类型 默认值是"application/x-www-form-urlencoded"
    //   processData: false, // 默认是true,会根据data的值来转换为查询字符串,如果要传递dom树或者不希望转换的信息,值应该为false
    //   success(res) {
    //     console.log(res)
    //     if (res.errno === 0) {
    //       // 将头像地址变更 res.data.url
    //       $("#img-picture").attr("src", res.data.url);
    //     }
    //   },
    //   error(err) {
    //     alert("上传图片失败,图片格式过大或者格式不对")
    //   }
    // })
  })

  // 更改基本信息
  $(".btn-primary").click(function (e) {
    e.preventDefault();
    // 获取基本信息 昵称 城市 头像url
    const newNickName = $("#input-nick").val();
    const newCity = $("#input-city").val();
    const newAvatar = $("#img-picture").attr("src");
    // 发送数据
    ajax.post("/api/user/changeUserInfo", {
      nickName: newNickName,
      city: newCity,
      avatar: newAvatar,
    },
      function (err, data) {
        if (err) {
          alert(err)
          return;
        }
        alert("更新用户信息成功")
      })
    // $.ajax({
    //   type: "post",
    //   url: "/api/user/changeUserInfo",
    //   data: {
    //     nickName: newNickName,
    //     city: newCity,
    //     avatar:newAvatar
    //   },
    //   success(res) {
    //     console.log(res);
    //     if(res.errno === 0) {
    //       alert("更新用户信息成功")
    
    //     }else {
    //       alert("更新用户信息失败")
    //     }
    //   },
    //   error(err) {
    //     alert("更改用户信息失败！")
    //   }
    // })
  })

  // 更改密码
  $("#submit").click(function (e) {
    e.preventDefault();
    // 判断原密码与新密码是否重复
    const oldPassword = $("#input-old-password").val();
    const newPassword = $("#input-new-password").val();
    const newRepeatPassword = $("#input-new-password-repeat").val();

    // 判断原始密码是否与新密码一致
    if (oldPassword === newPassword) {
      alert("更改密码失败,原始密码与新密码相同")
      return;
    }
    // 判断两次新密码是否相同
    if (newPassword !== newRepeatPassword) {
      alert("更改密码失败,新密码两次输入不一致")
      return;
    }

    // 发送数据
    ajax.post("api/user/changePassword", { oldPassword, newPassword }, function (err, data) {
      if (err) {
        alert(err);
        return;
      }
      alert("修改密码成功！")
      // 清空表单
      $("#input-old-password").val("");
      $("#input-new-password").val("");
      $("#input-new-password-repeat").val("");
    })

    // $.ajax({
    //   type: "post",
    //   url: "api/user/changePassword",
    //   data: { oldPassword, newPassword },
    //   dataType: "JSON",
    //   success(res) {
    //     console.log(res)
    //     if (res.errno === 0) {
    //       alert("修改密码成功")
    //       // 清空表单
    //       $("#input-old-password").val("");
    //       $("#input-new-password").val("");
    //       $("#input-new-password-repeat").val("");
    //     } else {
    //       alert("修改密码失败")
    //     }
    //   },
    //   error(err) {
    //     console.log(err);
    //   }
    // })
  })

  // 退出登录
  $("#btn-logout").click(function () {
    if (confirm("您是否要退出登录？") == false) {
      return;
    }

    // 触发注销路由
    ajax.post("/api/user/logout", function (err, data) {
      if (err) {
        alert(err);
        return;
      }
      alert("退出成功");
      location.href = "/login"
    })
    // $.ajax({
    //   type: "post",
    //   url: "/api/user/logout",
    //   success(res) {
    //     alert("退出成功");
    //     location.href = "/login";
    //   },
    //   error(err) {
    //     alert(err)
    //   }
    // })
  })
</script> {% endblock %}